<template>
  <div class="mod-user">
    <div class="listHead">
      <p class="functionBtn">
        <el-button  @click="goInsertSellOrder">转换成销售订单</el-button>
        <el-button @click="goInsertReturnSellOrder">同步</el-button>
      </p>
    </div>
    <div class="headInfo">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item class="datetime">
          <em>订单日期</em>
          <div class="block">
            <el-date-picker
              v-model="dataForm.createTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item
          ><em>订单编号</em>
          <el-input
            v-model="dataForm.orderSn"
            placeholder="订单编号"
            clearable
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item
          ><em>客户</em>
          <el-input
            v-model="dataForm.memberUsername"
            placeholder="客户"
            clearable
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item
          ><em>收货人</em>
          <el-input
            v-model="dataForm.receiverName"
            placeholder="收货人"
            clearable
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item
          ><em>联系方式</em>
          <el-input
            v-model="dataForm.receiverPhone"
            placeholder="联系方式"
            clearable
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item
          ><em>订单状态</em>
          <el-select
            clearable
            v-model="dataForm.status"
            placeholder="订单状态请选择"
            @change="change5($event)"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          ><em>已生成销售订单</em>
          <el-select
            clearable
            v-model="dataForm.isOrderNumber"
            placeholder="已生成销售订单请选择"
            @change="change5($event)"
          >
            <el-option
              v-for="item in isOrderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <p>
        <el-button @click="getDataList()">查询</el-button>
        <el-button @click="resetDataList()">重置</el-button>
      </p>
    </div>
    <div class="main">
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          show-overflow-tooltip
          width="50px"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="180"
          label="单据日期"
        >
        </el-table-column>
        <el-table-column
          prop="orderSn"
          header-align="center"
          align="center"
          width="300"
          label="单据编号"
        >
        </el-table-column>
        <el-table-column
          prop="memberUsername"
          header-align="center"
          align="center"
          label="客户"
        >
        </el-table-column>
        <el-table-column
          prop="receiverName"
          header-align="center"
          align="center"
          label="收货人"
        >
        </el-table-column>
        <el-table-column
          prop="receiverPhone"
          header-align="center"
          align="center"
          label="联系方式"
        >
        </el-table-column>
        <el-table-column
          prop="receiverDetailAddress"
          header-align="center"
          align="center"
          label="收货地址"
        >
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          header-align="center"
          align="center"
          label="订单总金额"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="订单状态"
        >
        <template slot-scope="scope">
          <span>{{scope.row.status==0?'待付款':scope.row.status==1?'已付款':scope.row.status==2?'已发货':scope.row.status==3?'已完成':scope.row.status==4?'已取消':scope.row.status==5?'售后中':scope.row.status==6?'售后完成':scope.row.status==7?'待确认':scope.row.status==8?'部分发货':""}}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="isOrderNumber"
          header-align="center"
          align="center"
          label="已生成销售订单"
        >
        <template slot-scope="scope">
          <span>{{scope.row.isOrderNumber==0?'否':'是'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="isAuth('sys:user:update')"
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.orderSn)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.orderSn, 'update')"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <div class="dialog">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="editdialogVisible"
        width="1320px">
        <div>
        <el-table
          :data="dialogDataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            show-overflow-tooltip
            width="50px"
          >
          </el-table-column>
          <el-table-column
            prop="skuName"
            header-align="center"
            align="center"
            label="商品名称"
          >
          </el-table-column>
          <el-table-column
            prop="skuId"
            header-align="center"
            align="center"
            label="SKU"
          >
          </el-table-column>
          <el-table-column
            prop="skuAttrsVals"
            header-align="center"
            align="center"
            label="属性"
          >
          </el-table-column>
          <el-table-column
            prop="skuPrice"
            header-align="center"
            align="center"
            label="单价"
          >
          </el-table-column>
          <el-table-column
            prop="skuQuantity"
            header-align="center"
            align="center"
            label="数量"
          >
          </el-table-column>
          <el-table-column
            prop="realAmount"
            header-align="center"
            align="center"
            label="总金额"
          >
          </el-table-column>
          <el-table-column
            prop="productNum"
            header-align="center"
            align="center"
            label="货品编码"
            v-if="dialogStatus == 0"
          >
          </el-table-column>
          <el-table-column
            prop="productNum"
            header-align="center"
            align="center"
            label="货品编码"
            v-else
          >
          <template slot-scope="scope">
              <el-input v-model="scope.row.productNum"></el-input>
          </template>
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="货品名称"
            v-if="dialogStatus == 0"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="货品名称"
            v-else
          >
          <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
          </template>
          </el-table-column>
          <el-table-column
            prop="standard"
            header-align="center"
            align="center"
            label="规格型号"
            v-if="dialogStatus == 0"
          >
          </el-table-column>
          <el-table-column
            prop="standard"
            header-align="center"
            align="center"
            label="规格型号"
            v-else
          >
          <template slot-scope="scope">
              <el-input v-model="scope.row.standard"></el-input>
          </template>
          </el-table-column>
        </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editdialogVisible = false">确 定</el-button>
          <!-- <el-button type="primary" @click="editdialogVisible = false" v-if="dialogStatus == 1">确定并传回</el-button> -->
        </span>
        <el-pagination
          @size-change="dialogsizeChangeHandle"
          @current-change="dialogcurrentChangeHandle"
          :current-page="dialogpageIndex"
          :page-size="dialogpageSize"
          :total="dialogtotalPage"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import AddOrUpdate from "./salelist-add-or-update";
export default {
  data() {
    return {
      dataForm: {
        createTime: "",
        orderSn: "",
        memberUsername: "",
        receiverName: "",
        receiverPhone: "",
        status: "",
        isOrderNumber: "",
      },
      statusOptions: [{
          value: '0',
          label: '待付款'
        }, {
          value: '1',
          label: '已付款'
        }, {
          value: '2',
          label: '已发货'
        }, {
          value: '3',
          label: '已完成'
        }, {
          value: '4',
          label: '已取消'
        }, {
          value: '5',
          label: '售后中'
        }, {
          value: '6',
          label: '售后完成'
        }, {
          value: '7',
          label: '待确认'
        }, {
          value: '8',
          label: '部分发货'
        }],
      isOrderOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
      dataList: [],
      pageIndex: 1,
      dialogpageIndex: 1,
      pageSize: 10,
      dialogpageSize: 10,
      totalPage: 0,
      dialogtotalPage: 0,
      dataListLoading: false,
      examineStatus: true,
      unexamineStatus: true,
      dataListSelections: [],
      addOrUpdateVisible: false,
      value1: [],
      beginTime: "",
      endTime: "",
      editdialogVisible: false,
      dialogTitle: "",
      dialogStatus:0,
    };
  },
  // components: {
  //   AddOrUpdate,
  // },
  activated() {
    this.getfindOrder();
  },
  methods: {
    goInsertSellOrder(){
      this.$http({
          url: this.$http.adornUrl(`/depotHead/insertSellOrder`),
          method: "post",
        }).then(({ data }) => {
            if (data.code === 0) {
            this.$message({
              message: "转换成销售订单成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$message.error(data.msg);
          }
        });
    },
    goInsertReturnSellOrder(){
      this.getfindOrder();
      // this.$http({
      //     url: this.$http.adornUrl(`/depotHead/insertReturnSellOrder`),
      //     method: "post",
      //   }).then(({ data }) => {
      //       if (data.code === 0) {
      //       this.$message({
      //         message: "同步成功",
      //         type: "success",
      //         duration: 2000,
      //       });
      //     } else {
      //       this.$message.error(data.msg);
      //     }
      // });
    },
    getTime() {
      this.beginTime = this.timestampToTime(this.value1[0].getTime());
      this.endTime = this.timestampToTime(this.value1[1].getTime());
      console.log(this.beginTime, this.endTime);
    },
    // 时间戳转成时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getHours() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate();
      return Y + M + D;
    },
    // 获取数据列表
    getfindOrder() {
      this.$http({
        url: this.$http.adornUrl(`/depotHead/findOrder`),
        method: "get",
      }).then(({ data }) => {
        console.log(data);
      });
      this.getDataList()
    },
    getDataList(){
      var createTime = "";
      if(this.dataForm.createTime){
        createTime = this.timestampToTime(this.dataForm.createTime.getTime())
      }
      var str = `{"createTime":"${createTime}","orderSn":"${this.dataForm.orderSn}","memberUsername":"${this.dataForm.memberUsername}","receiverName":"${this.dataForm.receiverName}","receiverPhone":"${this.dataForm.receiverPhone}","status":"${this.dataForm.status}","isOrderNumber":"${this.dataForm.isOrderNumber}"}`;
      var search = encodeURIComponent(str);
      this.$http({
        url: this.$http.adornUrl(`/depotHead/selectOrderProduct?search=${search}`),
        method: "get",
        params: this.$http.adornParams({
          pageSize:this.pageSize,
          currentPage:this.pageIndex,
        },false),
      }).then(({ data }) => {
        console.log(data.data)
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 每页数
    dialogsizeChangeHandle(val) {
      this.dialogpageSize = val;
      this.dialogpageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 当前页
    dialogcurrentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      if(val.length==1){
        if(val[0].status==1){
          this.examineStatus = true;
           this.unexamineStatus=false
        }
        if(val[0].status==0){
           this.examineStatus=false
           this.unexamineStatus=true
        }
      }
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(number, update) {
      console.log(number, update);
      this.editdialogVisible = true;
      if(update){
        this.dialogTitle = "编辑商品明细"
        this.dialogStatus = 1;
      }else{
        this.dialogTitle = "查看商品明细"
        this.dialogStatus = 0;
      }
      var str = `{"orderSn":"${number}"}`;
      var search = encodeURIComponent(str);
      this.$http({
        url: this.$http.adornUrl(`/depotHead/selectByOrderSn?search=${search}`),
        method: "get",
        params: this.$http.adornParams({
          pageSize:this.pageSize,
          currentPage:this.pageIndex,
        },false),
      }).then(({ data }) => {
        console.log(data.data.list)
        this.dialogDataList = data.data.list
        this.dialogtotalPage = data.data.totalCount
        })
    },
    // 重置
    resetDataList() {
      this.dataForm.createTime = "";
      this.dataForm.orderSn = "";
      this.dataForm.memberUsername = "";
      this.dataForm.receiverName = "";
      this.dataForm.receiverPhone = "";
      this.dataForm.status = "";
      this.dataForm.isOrderNumber = "";
      this.getDataList();
    },
  },
};
</script>
<style scoped>
.el-card__body .listHead {
  margin-top: -10px;
  border-bottom: 1px solid #eeeeee;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.el-form-item {
  width: 24%;
  justify-content: space-between;
  margin-bottom: 15px;
}
.el-form-item >>> .el-input {
  width: 200px;
}
.el-form-item >>> .el-form-item__content {
  display: flex;
}
.el-form-item >>> .el-form-item__content em {
  width: 100px;
  text-align: right;
  color: #31333d;
  margin-right: 15px;
  font-style: normal;
}
.block .el-date-editor .el-range-input {
  width: 50%;
}
.headInfo {
  margin-top: 20px;
}
.main >>> .el-table th,
.el-table tr {
  background-color: #F0F5FA;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333D;
}
.listHead >>> .functionBtn .el-button{
  background: #F2F9FF;
  color: #3153C8;
  border-color: #3153C8;
}
.listHead >>> .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
    background-color: #F5FAFF;
}
.headInfo >>> .el-date-editor .el-range-separator {
    width: 8%;
}
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
  width: 310px;
}
.headInfo >>> p{
  margin-right: 100px;
  text-align: right;
}
.headInfo >>> p .el-button{
  width: 62px;
  height: 30px;
  background: #3153C8;
  border-radius: 4px;
  line-height: 0;
  color: #FFF;
}
.headInfo >>> p .el-button span{
  margin-left: -4px;
}
.headInfo >>> p .el-button:last-child{
  background: #F2F9FF;
  border: 1px solid #3153C8;
  border-radius: 4px;
  color: #3153C8;
}
.listHead >>> .el-button{
  height: 30px;
  line-height: 0px;
}
.mod-user >>> .el-pagination {
    text-align: center;
}
.mod-user >>> .datetime .block{
  width: 200px;
}
.dialog >>> .el-dialog__footer {
  text-align: center;
}
.dialog >>> .el-dialog__footer .el-button{
  width: 140px;
  height: 40px;
  background: #3153C8;
  border-radius: 4px;
  margin-right: 30px;
}
.dialog >>> .el-dialog__footer .el-button:first-child{
  background: #FFFFFF;
  border: 1px solid #3153C8;
  border-radius: 4px;
  color: #3153C8;
}
.dialog >>> .el-table__header th{
  background: #F0F5FA;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333D;
}
.dialog >>> .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #F0F5FA;
}
.dialog >>> .el-table__row{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #31333D;
}
.dialog >>> .el-dialog__header{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #31333D;
  background: #e6f5fe;
  height: 52px;
}
.listHead >>> .functionBtn .is-disabled{
  background: #F5F5F5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999DA3;
  border-color:#dddddd;
}
</style>
